<!--
  功能：试卷编辑
  作者：licy
  邮箱：licy@briup.com
  时间：2021年01月15日 09:19:01
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="paper_edit">
    <div class="page_header">
      <el-page-header @back="goBack" :content="form.name"></el-page-header>
    </div>
    <!-- 表单 -->
    <el-form size="small" :model="form">
      <el-form-item label="试卷名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="试卷内容">
        <div style="clear: both">
          <!-- 题目预览 -->
          <div class="question_list_container">
            <ul class="question_list">
              <!-- 题目 -->
              <li class="question" v-for="(question,index) in form.questions" :key="question.id">
                <!-- 题干 -->
                <div class="title">
                  <span>{{index + 1}}、</span><el-tag>{{question.type}}</el-tag> 
                  <el-input size="mini" onkeyup="value=value.replace(/[^\d]/g,'')"  style="display:inline-block;width:60px" v-model="question.score" placeholder="分值"></el-input>
                </div>
                <div v-html="question.name"> </div>
                <!-- 选项 -->
                <div class="options">
                  <div v-for="option in question.options" :key="option.id">
                    {{option.label}}、
                    {{option.name}}
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <!-- 选择按钮 -->
          <div style="text-align: center">
            <el-button type="primary" size="small" plain @click="openQuestionBankHandler" >从题库选择</el-button >
          </div>
        </div>
      </el-form-item>
      <el-form-item style="text-align: right">
        <el-button type="primary" size="small" @click="submitHandler">确 认 提 交</el-button>
        <el-button type="primary" size="small" @click="goBack">取 消</el-button>
      </el-form-item>
    </el-form>
    <!-- /表单 -->
    <!-- 抽屉 -->
    <Briupdrawer :drawer-visible="visible" :title="title" width="50%" @on-change-visible="handlerVisibleChange" >
      <div slot="content">
        <!-- {{param}} -->
        <!-- 搜索表单开始 -->
        <el-form size="small" :model="param" :inline='true'>
          <el-form-item prop="questionBankId">
            <el-select v-model="param.questionBankId" placeholder="请选择题库" clearable>
              <el-option v-for="qb in questionBankData.list" :key="qb.id"  :value="qb.id" :label="qb.name"></el-option>
            </el-select>  
          </el-form-item>
          <el-form-item>
            <el-select v-model="param.level" style="width:100px">
              <el-option value="入门">入门</el-option>
              <el-option value="简单">简单</el-option>
              <el-option value="中等">中等</el-option>
              <el-option value="较难">较难</el-option>
              <el-option value="困难">困难</el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="param.type"  style="width:100px">
              <el-option value="单选">单选</el-option>
              <el-option value="多选">多选</el-option>
              <el-option value="填空">填空</el-option>
              <el-option value="判断">判断</el-option>
              <el-option value="问答">问答</el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="queryQuestion">搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 搜索表单结束 -->
        <!-- 表格 -->
        <el-table size="small" :data="questionData.list" v-loading="loading" 
        :row-key="(row)=>{ return row.id}"
        @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"  :reserve-selection="true"> </el-table-column>
          <el-table-column label="序号" type="index" :index="1"></el-table-column>
          <el-table-column label="题干" prop="name"> </el-table-column>
          <el-table-column label="类型" prop="type" width="50" align="center"> </el-table-column>
          <el-table-column label="难度" prop="level" width="50" align="center"> </el-table-column>
        </el-table>
        <!-- 表格结束 -->
        <!-- 分页 -->
        <div class="page">
          <el-pagination background 
            layout="prev, pager, next,sizes" 
            small
            :total="questionData.total" 
            :page-size="questionData.pageSize" 
            :current-page="questionData.page"
            :page-sizes="[5, 10, 15, 20]"
            @size-change="handleSizeChange"
            @current-change="currentChangeHandler">
          </el-pagination>
      </div>
        <!-- 分页 -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false" type="danger">关闭</el-button>
        <el-button size="small" type="primary" @click="selectQuestionHandler" >选择</el-button >
      </span>
    </Briupdrawer>
    <!-- 抽屉 -->
  </div>
</template>

<script>
import { get, post, postJSON } from "@/utils/request";
import _ from 'lodash'
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      loading:false,
      form: {
        questions:[]
      },
      visible: false,
      title: "题库",
      a:0,
      param: {
        page: 1,
        pageSize: 10
      }, // 题目
      questionBankData: { list: [] },
      questionData: { list: [] },
      questions:[],  // 保存选中的题目信息

    };
  },
  // 计算属性
  computed: {
    
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 确认提交按钮
    submitHandler(){
      if(!this.form.questions || this.form.questions.length<5){
        this.$message.error('至少有五个题目！');
        return false;
      }
      let flag = this.form.questions.some(item => {
        return !item.score || item.score<=0;
      })
      if(flag){
        this.$message.error('分值设置错误！');
        return false;
      }
      let url = "/exam/paper/merge"
      postJSON(url,this.form).then(resp => {
        this.$message({type:"success",message:resp.message})
        // 路由返回
        this.$router.go(-1);
      })
    },
    // 打开题库
    openQuestionBankHandler() {
      this.visible = true;
    },
    // 选择题目
    handleSelectionChange(val) {
      this.questions = val;
    },
    // 查询题库信息
    loadQuestionBanks() {
      // 添加loading,页面加载开始
      let url = "/exam/questionBank/pageQuery";
      get(url, { page: 1, pageSize: 10 }).then((response) => {
        this.questionBankData = response.data;
      });
    },
    // 点击搜索按钮
    queryQuestion(){
      this.param.page = 1;
      this.loadQuestion();
    },
    // 查询题目信息
    loadQuestion() {
      // 添加loading,页面加载开始
      let url = "/exam/question/pageQuery";
      get(url, this.param).then((response) => {
        this.questionData = response.data;
      });
    },
    // 选定题目
    selectQuestionHandler() {
      let questions =  _.clone(this.questions);
      let questions_dx = questions.filter(item => item.type==='单选')
      let questions_dxs = questions.filter(item => item.type==='多选')
      let questions_wd = questions.filter(item => item.type==='问答')
      let questions_pd = questions.filter(item => item.type==='判断')

      this.form = {
        ...this.form,
        questions:[...questions_dx,...questions_dxs,...questions_pd,...questions_wd],
      }
      //this.visible = false;
    },
    goBack() {
      this.$router.go(-1);
    },
    // 重置表单校验
    clearValidate() {
      this.$refs["form"].clearValidate();
    },
    // 处理visible变化的钩子函数，解决抽屉无法收缩的bug
    handlerVisibleChange(val) {
      this.visible = val;
    },
    // 当前页发生改变
    currentChangeHandler(page){
      this.param.page = page;
      this.loadQuestion();
    },
     // 处理分页大小变化的函数
    handleSizeChange(pageSize){
      // 当前页为第一页
      this.page = 1;
      // 页面大小为用户选择的页面
      this.param.pageSize = pageSize;
      this.loadQuestion();
    },
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    // 查询当前试卷
    this.form = this.$route.query;
    // 查询题库
    this.loadQuestionBanks();
    // 查询问题
    this.loadQuestion();

  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped lang="scss">
.paper_edit {
  color:#666;
  .question_list_container {
    .question {
      .options {
        padding:.5em 2em;
        & >div {
          line-height: 1.5em;
        }
      }
    }
  }

}
</style>
